<template>
    <div>
        <div class="container">
            <div class="nav">
                <div>
                    <a href="javascript:;" @click="$router.back()"></a>

                </div>
                <div>
                    <span>找车</span>
                </div>
                <div @click="subnav = !subnav">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
                    <div class="subnav" v-show="subnav">
                        <router-link to="/" tag="a">首页</router-link>
                        <router-link to="/news" tag="a">资讯</router-link>
                        <router-link to="/video" tag="a">视频</router-link>
                        <router-link to="/seek" tag="a">找车</router-link>
                        <router-link to="/plaint" tag="a">汽车投诉</router-link>
                    </div>
                </div>
            </div>
            <div class="tabs">
                <div><span>按品牌找车</span>
                    <i></i>
                </div>
                <router-link to="/seekPrice" tag="div">
                    <span>按条件找车</span>
                </router-link>
                
            </div>
            <div class="list">
                <div class="content">
                    <div :class="['item',typeInd == 0 ? 'con':'']" @click="typeInd=0">全部品牌</div>
                    <div :class="['item',typeInd == 1 ? 'con':'']" @click="typeInd=1">ABCDEFG</div>
                    <div :class="['item',typeInd == 2 ? 'con':'']" @click="typeInd=2">HIJKLMN</div>
                    <div :class="['item',typeInd == 3 ? 'con':'']" @click="typeInd=3">OPQRSTUV</div>
                    <div :class="['item',typeInd == 4 ? 'con':'']" @click="typeInd=4">WXYZ</div>
                </div>
            </div>
            <div v-if="typeInd == 0">
                <div v-for="(item,index) in dataAll" :key="index">
                    <div class="title">
                        {{item.name}}
                    </div>
                    <div class="brand">
                        <div v-for="(val,ind) in item.type" :key="ind">
                            <router-link class="item" tag="div" :to="{ path: '/carList', query: { userId: val.id } }">
                            <span class="img">
                                <img :src="val.img" alt="">
                            </span>
                            <span class="txt">{{val.name}}</span>
                            </router-link>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div v-if="typeInd == 1">
                <div class="title">
                    {{dataAll[typeInd].name}}
                </div>
                <div class="brand">
                    <div class="item" v-for="(val,ind) in dataAll[typeInd].type" :key="ind">
                        <span class="img">
                            <img :src="val.img" alt="">
                        </span>
                        <span class="txt">{{val.name}}</span>
                    </div>
                
                </div>
            </div>
            <div v-if="typeInd == 2">
                <div class="title">
                    {{dataAll[typeInd].name}}
                </div>
                <div class="brand">
                    <div class="item" v-for="(val,ind) in dataAll[typeInd].type" :key="ind">
                        <span class="img">
                            <img :src="val.img" alt="">
                        </span>
                        <span class="txt">{{val.name}}</span>
                    </div>
                
                </div>
            </div>
            <div v-if="typeInd == 3">
                <div class="title">
                    {{dataAll[typeInd].name}}
                </div>
                <div class="brand">
                    <div class="item" v-for="(val,ind) in dataAll[typeInd].type" :key="ind">
                        <span class="img">
                            <img :src="val.img" alt="">
                        </span>
                        <span class="txt">{{val.name}}</span>
                    </div>
                
                </div>
            </div>
            <div v-if="typeInd == 4">
                <div class="title">
                    {{dataAll[typeInd].name}}
                </div>
                <div class="brand">
                    <div class="item" v-for="(val,ind) in dataAll[typeInd].type" :key="ind">
                        <span class="img">
                            <img :src="val.img" alt="">
                        </span>
                        <span class="txt">{{val.name}}</span>
                    </div>
                
                </div>
            </div>
            <div v-else></div>
            <div class="search_foot">
                <div></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getJsonSeek } from '../api/carseek';
    export default {
        data(){
            return {
                dataInd:null,
                dataList:null,
                dataAll:null,
                typeInd:0,
                subnav: false
            }
        },
        created() {
            this.$emit("car-show", true);
            this.getData()
        },
        methods:{
            getData(){
                getJsonSeek().then(data => {
                    // console.log(data);
                    this.dataAll = data.logo;
                    console.log(this.dataAll);
                })
            }
        },
        watch:{
            typeInd(){
                // this.dataAll = this.dataAll.ag;
                // console.log(this.dataAll);
            }
        }
    }
</script>

<style lang="scss" scoped>
.nav {
    height: 44px;
    background-color: #35447b;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

 &:nth-child(3) {
     text-align: right;
     flex: 1;
     padding-right: 10px;
    position: relative;
     i {
         display: block;
         float: right;

     }
         .subnav {
             width: 100px;
             height: 170px;
             padding: 6px;
             border-radius: 4px;
             position: absolute;
             top: 35px;
             left: 12px;
             background: rgba(0, 0, 0, 0.8);
             z-index: 9;
    
             a {
                 width: 100px;
                 height: 18px;
                 padding: 8px 0;
                 text-align: center;
                 background-image: none;
                 color: #fff;
             }
    
             &::before {
                 content: "";
                 display: block;
                 position: absolute;
                 top: -17px;
                 left: 80px;
                 border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                 border-width: 9px;
                 border-style: dashed dashed solid dashed;
             }
         }
 }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 18px;
        }

        i {
            width: 25px;
            height: 22px;
            background-image: url("../assets/img/icons1.png");
            background-position: -175px -42px;
            background-size: 400px auto;
        }
    }
}

.tabs {
    height: 44px;
    display: flex;
    background-color: #eee;
    align-items: center;

    div {
        flex: 1;
        text-align: center;
        position: relative;
    }

    &>div {
        span {
            font-size: 18px;
            color: #999;
            padding-bottom: 8px;
        }

        &:first-of-type {
            span {
                border-bottom: 2px solid #4c61b0;
                color: #4c61b0;
            }
        }

        i {
            width: 1px;
            height: 24px;
            background-color: #d9d9d9;
            display: block;
            position: absolute;
            top: 0px;
            right: 0px;
        }
    }
}

.list {
    height: 35px;
    margin: 0 10px;
    padding: 14px 0;

    .content {
        height: 33px;
        border: 1px solid #e5e5e5;
        border-radius: 20px;
        overflow: hidden;
        display: table;

        .item {
            color: #999;
            font-size: 15px;
            flex: 1;
            text-align: center;
            display: table-cell;
            width: 1%;
            overflow: hidden;
            white-space: nowrap;
            line-height: 33px;
        }

        .con {
            background-color: #eee;
            color: #4c61b0;
        }
    }
}

.title {
    background-color: #eee;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    color: #999;
    font-weight: 600;
    text-indent: 10px;
}

.brand {
    height: 100%;
    margin: 0 10px;

    .item {
        padding: 10px;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;

        &:last-of-type {
            border-bottom: 0px;
        }

        span {
            img {
                width: 55px;
                height: 55px;
                margin-right: 15px;
            }
        }

        .txt {
            color: #333;
            font-size: 18px;
        }
    }
}
</style>